<!-- 富文本编辑器官网  https://www.wangeditor.com/ -->
<template>
  <div style="border: 1px solid #ccc">
    <!-- 工具栏 -->
    <Toolbar
      class="w-e-for-vue-toolbar"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :disabled="isDisabled"
    />
    <!-- 编辑器 -->
    <Editor
      class="w-e-for-vue-editor"
      :style="'height: ' + height"
      :defaultConfig="editorConfig"
      :disabled="isDisabled"
      v-model="html"
      @onChange="onChange"
      @onCreated="onCreated"
    />
  </div>
</template>

<script>
  import '@wangeditor/editor/dist/css/style.css'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

  export default {
    name: 'myEditor',
    components: { Editor, Toolbar },
    props: {
      content: {
        type: String,
        default: '',
      },
      // 富文本是否禁用
      isDisabled: {
        type: Boolean,
        default: false,
      },
      // 富文本高度
      height: {
        type: String,
        default: '50vh',
      },
    },
    data() {
      return {
        editor: null, // 富文本编辑器对象
        html: null, // 富文本内容
        // 工具栏配置
        toolbarConfig: {
          // 显示指定的菜单项
          // toolbarKeys: [],
          // 隐藏指定的菜单项
          excludeKeys: ['insertImage', 'insertVideo', 'fullScreen'],
        },
        // 编辑器配置
        editorConfig: {
          placeholder: '请输入内容...',
          // autoFocus: false,
          // readOnly: true, // 只读、不可编辑
          // 所有的菜单配置，都要在 MENU_CONF 属性下
          MENU_CONF: {
            // 配置上传图片
            uploadImage: {
              customUpload: this.uploaadImg,
            },
            // 配置上传视频
            uploadVideo: {
              customUpload: this.uploaadVideo,
            },
          },
        },
      }
    },
    created() {
      this.html = this.content
    },
    mounted() {},
    beforeDestroy() {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁 editor
    },
    methods: {
      // 上传图片
      uploaadImg(file, insertFn) {
        this.$emit('uploadImg', file, insertFn)
      },
      // 上传视频
      uploaadVideo(file, insertFn) {
        this.$emit('uploadVideo', file, insertFn)
      },

      // 实例化富文本编辑器
      onCreated(editor) {
        this.editor = Object.seal(editor)
        this.setIsDisabled()
        // console.log('Editor菜单配置', this.editor.getAllMenuKeys())
      },

      // 监听富文本编辑器
      onChange(editor) {
        // console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
        this.$emit('changeData', editor.getHtml())
      },

      // 设置富文本是否禁用
      async setIsDisabled() {
        if (this.editor) {
          this.isDisabled ? this.editor.disable() : this.editor.enable()
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .w-e-for-vue-toolbar {
    border-bottom: 1px solid #ccc;
  }
  .w-e-for-vue-editor {
    overflow-y: hidden;
  }
  ::v-deep .active {
    display: table-cell !important;
  }
  ::v-deep .w-e-select-list {
    ul {
      height: 220px;
    }
  }

  /*
  *  以下样式由于全局reset文件被覆盖，所以需要重新定义
  */

  ::v-deep h5,
  .h5 {
    font-size: 13.28px;
  }

  ::v-deep h4,
  .h4 {
    font-size: 16px;
    font-weight: bold;
  }

  ::v-deep h3,
  .h3 {
    font-size: 18.72px;
    font-weight: bold;
  }

  ::v-deep h2,
  .h2 {
    font-size: 24px;
    font-weight: bold;
  }

  ::v-deep h1,
  .h1 {
    font-size: 32px;
    font-weight: bold;
  }

  ::v-deep blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }
  ::v-deep blockquote p {
    padding: 10px 0;
  }
</style>
